<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            background-color: #9DAAC3;
        }
        h1{
            color:blueviolet;
            text-align: center;
        }
        h2{
            color:blueviolet;
            text-align: center;
        }
        form{
            text-align: center;
        }
        img{
            display: block;
            margin-left: auto;
            margin-right: auto;
            z-index: 1;
        }
    </style>
    <meta charset="UTF-8">
    <title> 请选择要上传的文件 </title>
</head>
<body>
    <div id="top" style="height: 50px;margin: auto;background-color: rgba(75,167,181,0.4);text-align: center">
        <form action="" enctype='multipart/form-data' method='POST'>
            <input type="file" name="file"/>
            <input type="submit" value="上传"/>
        </form>
{#        <input type="button" value="眼底图原图" id="btn1">#}
        <input type="button" value="血管分割" id="btn2">
        <input type="button" value="分叉点图" id="btn4">
        <input type="button" value="叠加图" id="btn5">
        <input type="button" value="血管中心线" id="btn6">
        <input type="button" value="动静脉图像" id="btn7">
        <input type="button" value="图像增强" id="btn8">
        <input type="button" value="视杯视盘" id="btn9">
        <input type="button" value="糖网分级" id="btn10">
        <input type="button" value="数据分析与诊断" id="btn3">
        <input type ='button' value="跳转至下载界面" onclick="jump()">
    </div>

    <div id="container" style=" width: 50%;height: 100%;float: left">
        <h1>您上传的图片是{{ Upload_path }}</h1>
        {% if Upload_path %}
            <img src="{{ url_for('static',filename = './download/vessel.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴" />
{#            <img src="{{ url_for('static',filename = './images/'+Upload_path) }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴" />#}
        {% endif %}
    </div>

    <div id="nextpage" style="width: 50%;height: 100%;display:none;float:left;text-align: center">
        <h1>您的血管分割图是</h1>

        <img src='/Users/zhoujiansheng/Desktop/2025代码/static/download/vessel_white.png' width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>
    </div>
    <div id="nextpage1" style="width: 50%;height: 100%;display:none;float:left;text-align: center">
        <h1>您的血管分叉点图是</h1>
        <img src="{{ url_for('static',filename = './download/vessel_red.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>
    </div>

    <div id="nextpage2" style="width: 50%;height: 100%;display:none;float:left;text-align: center">
        <h1>您的血管分叉混合点图是</h1>
        <img src="{{ url_for('static',filename = './download/vessel_green.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>
    </div>

    <div id="nextpage3" style="width: 50%;height: 100%;display:none;float:left;text-align: center">
        <h1>您的血管中心线图是</h1>
        <img src="{{ url_for('static',filename = './download/vessel_centerline.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>
    </div>

     <div id="nextpage4" style="width: 50%;height: 100%;display:none;float:left;text-align: center">
        <h1>您的动静脉图是</h1>
        <img src="{{ url_for('static',filename = './download/vessel_Ater.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>
    </div>

    <div id="nextpage5" style="width: 50%;height: 100%;display:none;float:left;text-align: center">
        <h1>图像增强</h1>
        <img src="{{ url_for('static',filename = './download/vessel_enhance.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>
    </div>

    <div id="nextpage6" style="width: 50%;height: 100%;display:none;float:left;text-align: center">
        <h1>视杯视盘</h1>
        <img src="{{ url_for('static',filename = './download/vessel_sbsp.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>
    </div>

    <div id="nextpage7" style="width: 50%;height: 100%;display:none;float:left;text-align: center">
        <h1>糖网分级</h1>
{#        <h2>{{ tangwang_res }}</h2>#}
        <img src="{{ url_for('static',filename = './download/vessel_tangwang.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>
    </div>

    <div id="data" style="width: 100%;height: 100%;display: none;text-align: center">
        <h1>您的患病概率图是</h1>
         <img src="{{ url_for('static',filename = './download/pie.png') }}" width={{ Width }} height={{ Height }} alt="阿巴阿巴"/>
        <h2>弯曲度特征是{{ Feature_out_tor }}</h2>
        <h2>VAD特征是{{ Feature_out_VAD }}</h2>
        <h2>VLD特征是{{ Feature_out_VLD }}</h2>
        <h2>FD特征是{{ Feature_out_FD }}</h2>

        <h2>糖网检测结果是：{{ tangwang_res }}</h2>
    </div>

    <div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
        <img src="/static/CSS/imedLOGO.png" width="60%"/>
    </div>

</body>

<script>
    function jump()
    {
        window.location.href="download";
    }

    function my(id)
    {
        return document.getElementById(id);
    }



    my("btn2").onclick=function ()
    {
        my("container").style.display = "block";
        my("nextpage").style.display = "block";
        my("nextpage1").style.display = "none";
        my("nextpage2").style.display = "none";
        my("nextpage3").style.display = "none";
        my("nextpage4").style.display = "none";

        my("nextpage5").style.display = "none";
        my("nextpage6").style.display = "none";
        my("nextpage7").style.display = "none";

        my("data").style.display= "none"
    }

    my("btn3").onclick=function ()
    {
        my("container").style.display = "none";
        my("nextpage").style.display = "none";
        my("nextpage1").style.display = "none";
        my("nextpage2").style.display = "none";
        my("nextpage3").style.display = "none";
        my("nextpage4").style.display = "none";


        my("nextpage5").style.display = "none";
        my("nextpage6").style.display = "none";
        my("nextpage7").style.display = "none";

        my("data").style.display= "block"
    }
    my("btn4").onclick=function ()
    {
        my("container").style.display = "block";
        my("nextpage").style.display = "none";
        my("nextpage1").style.display = "block";
        my("nextpage2").style.display = "none";
        my("nextpage3").style.display = "none";
        my("nextpage4").style.display = "none";


        my("nextpage5").style.display = "none";
        my("nextpage6").style.display = "none";
        my("nextpage7").style.display = "none";

        my("data").style.display= "none"
    }
    my("btn5").onclick=function ()
    {
        my("container").style.display = "block";
        my("nextpage").style.display = "none";
        my("nextpage1").style.display = "none";
        my("nextpage2").style.display = "block";
        my("nextpage3").style.display = "none";
        my("nextpage4").style.display = "none";


        my("nextpage5").style.display = "none";
        my("nextpage6").style.display = "none";
        my("nextpage7").style.display = "none";

        my("data").style.display= "none"
    }
    my("btn6").onclick=function ()
    {
        my("container").style.display = "block";
        my("nextpage").style.display = "none";
        my("nextpage1").style.display = "none";
        my("nextpage2").style.display = "none";
        my("nextpage3").style.display = "block";
        my("nextpage4").style.display = "none";

        my("nextpage5").style.display = "none";
        my("nextpage6").style.display = "none";
        my("nextpage7").style.display = "none";

        my("data").style.display= "none"
    }
    my("btn7").onclick=function ()
    {
        my("container").style.display = "block";
        my("nextpage").style.display = "none";
        my("nextpage1").style.display = "none";
        my("nextpage2").style.display = "none";
        my("nextpage3").style.display = "none";
        my("nextpage4").style.display = "block";

        my("nextpage5").style.display = "none";
        my("nextpage6").style.display = "none";
        my("nextpage7").style.display = "none";


        my("data").style.display= "none"
    }

    my("btn8").onclick=function ()
    {
        my("container").style.display = "block";
        my("nextpage").style.display = "none";
        my("nextpage1").style.display = "none";
        my("nextpage2").style.display = "none";
        my("nextpage3").style.display = "none";
        my("nextpage4").style.display = "none";

        my("nextpage5").style.display = "block";
        my("nextpage6").style.display = "none";
        my("nextpage7").style.display = "none";

        my("data").style.display= "none"
    }

    my("btn9").onclick=function ()
    {
        my("container").style.display = "block";
        my("nextpage").style.display = "none";
        my("nextpage1").style.display = "none";
        my("nextpage2").style.display = "none";
        my("nextpage3").style.display = "none";
        my("nextpage4").style.display = "none";

        my("nextpage5").style.display = "none";
        my("nextpage6").style.display = "block";
        my("nextpage7").style.display = "none";

        my("data").style.display= "none"
    }

        my("btn10").onclick=function ()
    {
        my("container").style.display = "block";
        my("nextpage").style.display = "none";
        my("nextpage1").style.display = "none";
        my("nextpage2").style.display = "none";
        my("nextpage3").style.display = "none";
        my("nextpage4").style.display = "none";

        my("nextpage5").style.display = "none";
        my("nextpage6").style.display = "none";
        my("nextpage7").style.display = "block";

        my("data").style.display= "none"
    }

</script>

</html>
{##}
{#<div id="container" style="margin: auto;position: absolute; width: 50%;height: 100%;float: left">#}
{#    <div id="nextpage" style="margin: auto;position: absolute; width: 50%;height: 100%;display:none;float:left;text-align: center">#}
{#        <h1>您的血管分割图是</h1>#}
{#        <img src="{{ url_for('static',filename = './download/vessel_white.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>#}
{#        <h1>您的血管分叉点图是</h1>#}
{#        <img src="{{ url_for('static',filename = './download/vessel_red.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>#}
{#        <h1>您的血管分叉混合点图是</h1>#}
{#        <img src="{{ url_for('static',filename = './download/vessel_green.png') }}" width={{ Length }} height={{ Width }} alt="阿巴阿巴"/>#}
{#    </div>#}